<html>
<head>
  <style>
    div {
        transition: background-color .15s linear;
    }
    div.trans {
        background-color: hsla(0, 50%, 50%, 1);
    }
  </style>
  <script>
    function checkRunning()
    {
      var current = document.getAnimations().length;
      if (current == 0)
        document.getElementById('result').innerHTML = "PASS: Number of active transitions is (0) as expected";
      else
        document.getElementById('result').innerHTML = "FAIL: Number of active transitions is (" + current + ") but was expecting (0)";
      testRunner.notifyDone();
    }

    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }
  </script>
</head>
<body>

<div id="foo">This should not be continually firing transitions</span>

<script type="text/javascript" charset="utf-8">
    // Force a layout so that changing the classname below causes an animation.
    document.body.offsetHeight;

    document.getElementById('foo').addEventListener('transitionend', function() {
        setTimeout(checkRunning, 0);
    });

    document.getElementById("foo").className="trans";
</script>

<div id="result">
</div>
</body>
</html>
